<template>
  <div class="computed-demo">
    <!-- v-model双向绑定 -->
    <div>姓：<input type="text" v-model="firstName" /></div>
    <div>名：<input type="text" v-model="lastName" /></div>
    <div>姓名：{{ fullName }}</div>
    <button @click="changeFullName">修改全名为lisi</button>
  </div>
</template>

<script lang="ts" setup name="ComputedDemo">
//使用computed方法作为计算属性
import { ref, computed } from "vue";

let firstName = ref("");
let lastName = ref("");
//这样定义，计算属性只能读，不能写
// let fullName = computed(() => {
//   return firstName.value + lastName.value;
// });
//这样定义，计算属性可读写
let fullName = computed({
  get() {
    return firstName.value + "-" + lastName.value;
  },
  set(val) {
    console.log("set", val);
    const [first, last] = val.split("-");
    firstName.value = first;
    lastName.value = last;
  },
});

function changeFullName() {
  fullName.value = "li-si";
}
</script>

<style>
.computed-demo {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>